<template>
  <div class="designer-container">
    <div ref="canvasContainer" class="three-canvas"></div>
  <div class="controls">
    <button @click="resetCamera">{{ $t('designer.reset_view') }}</button>
    <div class="material-controls">
      <input type="color" v-model="materialColor" @change="updateMaterial" />
      <input type="range" v-model="materialRoughness" min="0" max="1" step="0.1" @input="updateMaterial" />
      <button @click="exportDesign" class="export-btn">
        {{ $t('designer.export_design') }}
      </button>
    </div>
  </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const canvasContainer = ref(null)
let scene, camera, renderer, controls, pouchMesh

// 响应式材质属性
const materialColor = ref('#ff4444')
const materialRoughness = ref(0.3)

// 初始化场景
function initScene() {
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, 
    canvasContainer.value.clientWidth / canvasContainer.value.clientHeight, 
    0.1, 1000
  )
  
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(
    canvasContainer.value.clientWidth,
    canvasContainer.value.clientHeight
  )
  renderer.setClearColor(0xf0f0f0)
  canvasContainer.value.appendChild(renderer.domElement)

  // 初始化轨道控制器
  controls = new OrbitControls(camera, renderer.domElement)
  camera.position.z = 5

  // 添加环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
  scene.add(ambientLight)

  // 创建包装袋基础模型
  createPouchModel()
}

// 创建软包装袋模型
function createPouchModel() {
  const geometry = new THREE.BoxGeometry(2, 3, 0.1)
  const material = new THREE.MeshPhysicalMaterial({
    color: materialColor.value,
    roughness: materialRoughness.value,
    metalness: 0.1
  })
  
  pouchMesh = new THREE.Mesh(geometry, material)
  scene.add(pouchMesh)
}

// 更新材质属性
function updateMaterial() {
  pouchMesh.material.color.set(materialColor.value)
  pouchMesh.material.roughness = materialRoughness.value
  pouchMesh.material.needsUpdate = true
}

// 重置相机视角
function resetCamera() {
  camera.position.set(0, 0, 5)
  controls.update()
}

// 处理窗口大小变化
function onWindowResize() {
  camera.aspect = canvasContainer.value.clientWidth / canvasContainer.value.clientHeight
  camera.updateProjectionMatrix()
  renderer.setSize(
    canvasContainer.value.clientWidth,
    canvasContainer.value.clientHeight
  )
}

onMounted(() => {
  initScene()
  window.addEventListener('resize', onWindowResize)
  animate() // 启动动画循环
})

onBeforeUnmount(() => {
  // 停止动画循环
  cancelAnimationFrame(animationFrameId)
  
  // 移除事件监听
  window.removeEventListener('resize', onWindowResize)
  
  // 清除Three.js资源
  if (pouchMesh) {
    pouchMesh.geometry.dispose()
    pouchMesh.material.dispose()
    scene.remove(pouchMesh)
  }
  
  // 销毁控制器
  controls.dispose()
  
  // 清除渲染器
  renderer.dispose()
  canvasContainer.value.removeChild(renderer.domElement)
  
  // 释放场景引用
  scene = null
  camera = null
  renderer = null
  controls = null
})

// 在animate函数外声明动画帧ID
let animationFrameId
function animate() {
  animationFrameId = requestAnimationFrame(animate)
  controls.update()
  renderer.render(scene, camera)
}
</script>

<style scoped>
.designer-container {
  position: relative;
  width: 100%;
  height: 80vh;
}

.three-canvas {
  width: 100%;
  height: 100%;
}

.controls {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.9);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.material-controls {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>
